<!--
 * @Author: chunlai
 * @Date: 2023-12-07 08:51:57
 * @LastEditTime: 2025-11-26 09:33:05
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\components\MsRadio.vue
 * @Description: 单选按钮
-->

<template>
  <div :class="['radios_box', flexName]">
    <span
      class="radios_item"
      v-for="(item, index) in arrList"
      :key="index"
      :class="{ active: `${curVal}` == `${item[valueName]}` }"
      @click="handleClick(item)"
    >
      {{ item[labelName] }}
    </span>
  </div>
</template>

<script>
export default {
  name: "MsRadio",
  props: {
    arrList: {
      type: Array,
      default: () => [],
    },
    curVal: {
      type: [String, Number, Boolean],
      default: () => "",
    },
    btnType: {
      type: String,
      default: () => "sex",
    },
    labelName: {
      type: String,
      default: () => "label",
    },
    valueName: {
      type: String,
      default: () => "value",
    },
    riskItem: {
      type: Object,
      default: () => {},
    },
    flexName: {
      type: String,
      default: () => "normal",
    },
  },
  methods: {
    handleClick(item) {
      // 合并续保规则校验-泰康
      if (this.instype == "2" && this.riskItem && this.riskItem.renewalRule) {
        const ruleTgr = this.riskItem.renewalRule;
        let curValue = item.value,
          preValue = this.$getMessage("totalAmnt");
        if (ruleTgr.target == "prem") {
          curValue = item.prem;
        }
        if (ruleTgr.limit == "less" && curValue > preValue) {
          return this.$toast("不可选");
        }
        if (ruleTgr.limit == "more" && curValue < preValue) {
          return this.$toast("不可选");
        }
      }
      this.$emit("clickEvent", item, this.btnType);
    },
  },
};
</script>

<style lang="less" scoped>
.radios_box {
  display: flex;

  &.normal {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .radios_item {
    min-width: 64px;
    height: 30px;
    line-height: 28px;
    padding: 0 10px;
    border-radius: 2px;
    color: #747474;
    font-size: 14px;
    text-align: center;
    margin: 3px 0 3px 6px;
    background-color: #f2f2f5;
    border: 1px solid #f2f2f5;
    &.active {
      color: #f54040;
      background-color: #fff0f0;
      border-color: #f54040;
      // position: relative;
      // &::after {
      //   content: " ";
      //   width: 200%;
      //   height: 200%;
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   border-radius: inherit;
      //   transform: scale(0.5);
      //   transform-origin: 0 0;
      //   pointer-events: none;
      //   box-sizing: border-box;
      //   border: 1px solid #f54040;
      // }
    }
  }
  &.gap {
    gap: 10px;
    .radios_item {
      flex: 1;
      margin-left: 0;
    }
  }
  &.mag0{
    .radios_item {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
</style>
